<template>
	<view class="mall_order">
		<uv-navbar leftText="兑换记录" @leftClick="leftClick" placeholder />
		
		<view class="tabs">
			<uv-tabs :list="tabsList" @click="tabsClick" lineColor="#BC2722" />
		</view>
		
		<view class="list">
			<view class="empty">
				<uv-empty text="还没有相关订单" icon="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0814/49047202508141010003568.png"/>
			</view>
		</view>
		
		<lst-tabbar :value="1" :list="tabbarList" />
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	const tabbarList = ref([
		{ text: '首页', inactive: 'home/market_tabbar_home_i.png', active: 'home/market_tabbar_home_a.png', path: '/pages-home/market/mall' },
		{ text: '订单', inactive: 'home/market_tabbar_order_i.png', active: 'home/market_tabbar_order_a.png', path: '/pages-home/market/mall_order' }
	])
	const tabsList = ref([{ name:'待服务' }, { name:'已完成' }, { name:'已退款' }])
	
	const leftClick = () => uni.navigateBack()
	
	const tabsClick = (i) => {
		console.log(i)
	}
</script>

<style>
	page {
		background-color: #F3F4F6;
	}
</style>

<style lang="scss" scoped>
	.tabs {
		z-index: 2;
		position: sticky;
		padding: 0 20upx;
		background-color: #fff;
		top: calc(var(--status-bar-height) + 85upx);
	}
	.list {
		padding: 30upx;
	}
	.empty {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		min-height: 65vh;
	}
</style>